<template>

    <view >
        <view @click="handleClick">
            <up-input :placeholder="props.placeholder" v-model="props.modelValue" 
                  :border="props.border" readonly ></up-input>
        </view>
        <SelectListModal ref="listModalRef" :labelKey="props.labelKey" :valueKey="props.valueKey"
                         :title="props.title" :multiple="props.multiple" @confirm="handleConfirm"
                         :allowCutsom="props.allowCutsom" :afterRequest="props.afterRequest"></SelectListModal>
        <block v-if="type=='date'">
            <up-datetime-picker
                v-model ="props.modelValue" 
                :show="datePickerShow" :title="props.title" :mode="dateMode"
                @cancel="()=>{datePickerShow=false}"
                @confirm="handlerDateTimeConfirm"
            ></up-datetime-picker>
        </block>
        
    </view>

</template>

<script lang="ts" setup>
    import moment from 'moment';
import SelectListModal from './modal/SelectListModal.vue';
    import {onMounted, ref} from "vue"
import { FormatDate } from '../utils/utils';

    const props=defineProps({
        type:String, //select,date
        dateMode:"datetime",  //date为日期选择，time为时间选择，year-month为年月选择
        dateFormat:"YYYY-MM-DD HH:mm:ss",
        placeholder:String,
        modelValue:String,
        list:Array,
        border:String,
        url:String,
        method:String,
        title:String,
        param:{},
        multiple:Boolean,
        afterRequest:Function,
        labelKey:{
            default:"label",
            type:String
        },
        valueKey:{
            default:"value",
            type:String
        },
        allowCutsom:Boolean
    })

    const emits=defineEmits(["update:modelValue","confirm"])

    const datePickerShow=ref(false)

    const listModalRef=ref(null)

    const handleClick=()=>{
        if(props.type=='select'){
            listModalRef.value.open({list:props.list,url:props.url,method:props.method,param:props.param})
        }
        if(props.type=='date'){
            datePickerShow.value=true
        }
        
    }

    const handlerDateTimeConfirm=(e)=>{
        
        setValue(FormatDate(e.value,props.dateFormat))
        datePickerShow.value=false
    }

    const setValue=(value)=>{
        emits("update:modelValue",value)
    }

    const handleConfirm=(param)=>{
        setValue(param.objList[0].label)
        emits("confirm",param.objList[0])
    }
	
	onMounted(()=>{
		// console.log(props)
	})

</script>

<style lang="scss">
</style>